<template>
  <div>
    <div class="search-context">
      <div>
        <el-row :gutter="20">
          <el-col :span="3">
            <el-input v-model="search.username" placeholder="输入用户名搜索"></el-input>
          </el-col>
          <el-col :span="3">
            <el-input v-model="search.realName" placeholder="输入真实姓名搜索"></el-input>
          </el-col>
          <el-col :span="3">
            <el-input v-model="search.mobile" placeholder="输入电话搜索"></el-input>
          </el-col>
          <el-col :span="4">
            <el-date-picker
                v-model="search.startTime"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                placeholder="开始时间">
            </el-date-picker>
          </el-col>
          <el-col :span="4">
            <el-date-picker
                v-model="search.endTime"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                placeholder="结束时间">
            </el-date-picker>
          </el-col>
          <el-col :span="4">
            <el-button type="success" icon="el-icon-search" @click="handlerQuery">搜索</el-button>
            <el-button type="warning" icon="el-icon-refresh-right" @click="resetHandlerQuery">重置</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
    <div style="margin-top: 20px">
      <el-table
          :data="tableData"
          style="width: 100%"
          row-key="logAdminLoginId"
          highlight-current-row
          :indent="20"
          border
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
            prop="logAdminLoginId"
            v-if="false"
            label="后台管理登陆日志id">
        </el-table-column>
        <el-table-column
            prop="username"
            label="用户名">
        </el-table-column>
        <el-table-column
            prop="realName"
            label="真实姓名">
        </el-table-column>
        <el-table-column
            prop="mobile"
            label="电话">
        </el-table-column>
        <el-table-column
            prop="ip"
            label="IP">
        </el-table-column>
        <el-table-column
            prop="actionUri"
            label="请求地址">
        </el-table-column>
        <el-table-column
            prop="actionMethod"
            label="请求方法">
        </el-table-column>
        <el-table-column
            prop="actionParam"
            label="请求参数">
        </el-table-column>
        <el-table-column
            prop="createDateTime"
            label="时间">
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
            :current-page="page.pageNum"
            :page-sizes="page.pageSizes"
            :page-size="page.pageSize"
            layout="total, prev, pager, next, sizes"
            :total="page.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "actionLog",
  data() {
    return {
      search: {
        username:null,
        realName:null,
        mobile:null,
        startTime:null,
        endTime:null,
        pageNum: null,
        pageSize: null
      },
      page: {
        pageSize: 10,
        total: 0,
        pageNum: 1,
        pageSizes: [1, 10, 20, 50, 100]
      },
      tableData: []
    }
  },
  created() {
    this.handlerTable();
  },
  methods: {
    handlerTable() {
      this.search.pageSize = this.page.pageSize;
      this.search.pageNum = this.page.pageNum;
      var param = this.search;
      this.logsRequest.getAdminActionLogs(this, param, (res) => {
        console.log(res)
        if (res.data) {
          this.tableData = res.data.list;
          this.page.total = res.data.total;
        } else {
          this.tableData = [];
        }
      })
    },
    handlerQuery() {
      this.handlerTable();
    },
    resetHandlerQuery() {
      this.search.username = null;
      this.search.realName = null;
      this.search.mobile = null;
      this.search.startTime = null;
      this.search.endTime = null;
      this.handlerTable();
    },
    // 页大小发生改变事件
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.handlerTable();
    },
    // 页码发生改变事件
    handlePageChange(val) {
      this.page.pageNum = val;
      this.handlerTable();
    }
  },
}
</script>

<style scoped>

</style>